<template>
      <div class="mapCon" :style="mapStyle"  id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
require("echarts/dist/extension/bmap.min.js");
import chart from "@/components/Charts/chart";
// mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13, 20],
          },]
           */
export default {
  name: "index",
  props: {
    mapStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    areaName: {
      type: String,
      default: () => {
        return "";
      }
    },
    center: {
      type: String,
      default: () => {
        return "老城";
      }
    }
  },
  components: { chart },
  watch: {
    value(res) {
      var areaName = this.areaName;
      this.fetchMap(res);
    }
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(placeData) {
      var geoCoordMap = {
        西工区: [112.4309294976, 34.6670038363],
        涧西区: [112.3591770197, 34.6610212021],
        洛龙区: [112.4638651322, 34.6236159104],
        老城区: [112.4350295831, 34.7253048201],
        瀍河区: [112.4963006537, 34.7039155259]
      };
      var center = geoCoordMap[this.center];
      // 地图自定义样式
      var bmap = {
        center: center,
        zoom: 13,
        roam: false,
        mapStyle: {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#021019"
              }
            },
            {
              featureType: "highway",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "highway",
              elementType: "geometry.stroke",
              stylers: {
                color: "#147a92"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.stroke",
              stylers: {
                color: "#0b3d51"
              }
            },
            {
              featureType: "local",
              elementType: "geometry",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#08304b"
              }
            },
            {
              featureType: "railway",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "railway",
              elementType: "geometry.stroke",
              stylers: {
                color: "#08304b"
              }
            },
            {
              featureType: "subway",
              elementType: "geometry",
              stylers: {
                lightness: -70
              }
            },
            {
              featureType: "building",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.fill",
              stylers: {
                color: "#857f7f"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.stroke",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "building",
              elementType: "geometry",
              stylers: {
                color: "#022338"
              }
            },
            {
              featureType: "green",
              elementType: "geometry",
              stylers: {
                color: "#062032"
              }
            },
            {
              featureType: "boundary",
              elementType: "all",
              stylers: {
                color: "#1e1c1c"
              }
            },
            {
              featureType: "manmade",
              elementType: "geometry",
              stylers: {
                color: "#022338"
              }
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "all",
              elementType: "labels.icon",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.fill",
              stylers: {
                color: "#2da0c6",
                visibility: "on"
              }
            }
          ]
        }
      };
      var coverData = [];
      placeData.forEach(item => {
        var obj = {
          name: "",
          value: []
        };
        obj.name = item.name;
        obj.value = [item.blng, item.blat, item.id];
        coverData.push(obj);
      });
      var option = {
        bmap: bmap,
        tooltip: {
          show: false
        },
        series: {
          type: "scatter",
          coordinateSystem: "bmap",
          data: coverData,
          symbolSize: 20,
          symbol: "image:// ../../../../../../../static/img/flh/addmdpi.png",
          symbolRotate: 0,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true,
              textStyle: {
                color: "#2ff0d2"
              }
            },
            emphasis: {
              show: false
            }
          }
        }
      };
      var self = this;
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
      self.mapChart.on("click", function(params) {
        self.$emit("on-map", params.name);
      });
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 390px;
  min-width: 642px;
  right: 10px;
  position: fixed;
  top: 10px;
}
</style>
